<template>
  <div>
    <el-dialog
      v-model="isShow"
      :title="menuInfo._id?'修改菜单':'添加菜单'"
      width="500"
      center
      @open="openDialog"
      @close="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="menuInfo"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="菜单名称:" prop="menuName">
          <el-input
            placeholder="请输入菜单名称"
            v-model="menuInfo.menuName"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单值:" prop="menuValue">
          <el-input
            placeholder="请输入菜单值"
            v-model="menuInfo.menuValue"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单描述:" prop="menuContent">
          <el-input
            placeholder="请输入菜单描述"
            v-model="menuInfo.menuContent"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="AddMenus"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
defineOptions({
  name: "AddMenu",
});
import { ref, watch, onMounted , reactive } from "vue";
import { addMenuAPI , updateMenuAPI , getMenuInfoAPI } from "@/api/menu";
import { ElMessage } from "element-plus";
const props = defineProps(["modelValue","menuId"]);
const emits = defineEmits(["update:modelValue", "getMenuList","update:menuId"]);
let isShow = ref(props.modelValue);
let formRef = ref(null);
let menuInfo = reactive({
  menuName: "",
  menuValue: "",
  menuContent: "",
});
let rules = reactive({
  menuName: [
    { required: true, message: "请输入菜单名称", trigger: "blur" },
    { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
  ],
  menuValue: [
    { required: true, message: "请输入菜单值", trigger: "blur" },
    { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" },
  ],
  menuContent: [
    { required: true, message: "请输入菜单描述", trigger: "blur" },
    { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" },
  ],
});

watch(
  () => props.modelValue,
  (newValue) => {
    isShow.value = newValue;
  }
);

watch(isShow, (newValue) => {
  emits("update:modelValue", newValue);
});

const AddMenus = async () => {
  await formRef.value.validate();
  let result = menuInfo._id? await updateMenuAPI(menuInfo._id,menuInfo) : await addMenuAPI(menuInfo);
  if (result.code == 200) {
    isShow.value = false;
    ElMessage.success(menuInfo._id?"修改成功":"添加成功");
    emits("getMenuList");
  }
};
const getMenuInfo = async ()=>{
  console.log(1);
  if(menuInfo._id) {
    let result = await getMenuInfoAPI(menuInfo._id)
    Object.assign(menuInfo,result.data)
  }
}
const openDialog = () => {
  formRef.value.resetFields();
  menuInfo.menuName = "";
  menuInfo.menuValue = "";
  menuInfo.menuContent = "";
  menuInfo._id = props.menuId;
  getMenuInfo()
};
const closeDialog = ()=>{
  emits('update:menuId','')
  menuInfo._id = ''
}

</script>

<style lang="scss" scoped></style>
